<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options" export-image></L7Map>
</template>

<script setup lang="ts">
import { Scene, LineLayer, PointLayer, Popup, } from '@antv/l7'
// import wordLine from './data/wordLine.json'
import dotPoint from './data/dotPoint.ts'
import flyData from './data/flyData.ts'

const options: any = ref({
    projection: '',
    pitch: 45,
    center: [94, 33.16797],
    zoom: 3,
})
const handleLoaded = (scene: Scene) => {
    scene.addImage('plane', '/img/plane_yellow.svg');
    // @ts-ignore
    const flyDatas: any = flyData.map((item: any) => {
        // @ts-ignore
        const latlng1 = item.from.split(',').map((e) => {
            return e * 1;
        });
        // @ts-ignore
        const latlng2 = item.to.split(',').map((e) => {
            return e * 1;
        });
        return { coord: [latlng1, latlng2] };
    });

    // 世界地图边框线
    // const worldLine = new LineLayer().source(wordLine).color('#41fc9d').size(0.5).style({
    //     opacity: 0.4,
    // });

    const dotPoints = new PointLayer()
        .source(dotPoint, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat',
            },
        })
        .shape('circle')
        .color('name', ['#006dff', '#ffed11', 'pink'])
        .animate(true)
        .size(40);

    const popup = new Popup({})

    dotPoints.on('mousemove', (e: any) => {
        popup.setLngLat(e.lngLat).setHTML(e.feature?.info || 'empty')
        scene.addPopup(popup)
    })

    dotPoints.on('unmousemove', (e: any) => {
        scene.removePopup(popup)
    })

    const flyLine = new LineLayer({ blend: 'normal' })
        .source(flyDatas, {
            parser: {
                type: 'json',
                coordinates: 'coord',
            },
        })
        .color('#ff6b34')
        .texture('plane')
        .shape('arc3d')
        .size(16)
        .animate({
            duration: 1,
            interval: 0.2,
            trailLength: 0.05,
        })
        .style({
            textureBlend: 'replace',
            lineTexture: true, // 开启线的贴图功能
            iconStep: 10, // 设置贴图纹理的间距
        });

    const flyLine2 = new LineLayer()
        .source(flyDatas, {
            parser: {
                type: 'json',
                coordinates: 'coord',
            },
        })
        .color('#ff6b34')
        .shape('arc3d')
        .size(1)
        .style({
            lineType: 'dash',
            dashArray: [5, 5],
            opacity: 0.7,
        });
    // scene.addLayer(worldLine);  // 世界地图边框线
    scene.addLayer(dotPoints);  // 国家点
    scene.addLayer(flyLine2);  // 轨迹线
    scene.addLayer(flyLine);  // 飞机动态飞行

}
</script>

<style lang="less" scoped>
.three-d-city {
    width: 100%;
    height: 100%;
}
</style>